<template>
  <div class="dept-page">
    <el-row>
      <el-col :span="6">
        <div class="grid-content">
          <div class="title">
            <div style="float: left">组织机构</div>
            <el-input v-model="deptFilter" @input="filterDept" placeholder="搜索" suffix-icon="fa fa-search"
                      style="float: right;width: calc(100% - 80px);height: 33px"/>
          </div>
          <el-tree
            ref="deptTree"
            :data="data"
            :default-expanded-keys="shidata"
            :props="defaultProps"
            node-key="id"
            highlight-current
            :filter-node-method="filterNode"
            @node-click="handleNodeClick"
            style="height: calc(100% - 45px);overflow:auto;"/>
        </div>
      </el-col>
      <el-col :span="18" style="padding-left: 10px">
        <div class="grid-content">
          <d2-crud
            ref="d2Crud"
            :columns="columns"
            :data="dataTable"
            :options="options"
            index-row
            selection-row
            :rowHandle="rowHandle"
            @selection-change="selectChange"
            @row-click="rowClick"
            @add-model="add"
            @edit-model="mod"
            @del-model="del"
            @current-change="handleCurrentChange">
            <div class="title" slot="header">
              <div style="float: left">机构列表</div>
              <list-search :cols="columns" @search="searchParamChange"/>
              <head-btns :add="add" :mod="mod" :del="del"/>
            </div>
          </d2-crud>
        </div>
      </el-col>
    </el-row>
    <detail-info
      v-model="detailVisible"
      ref="detailFrom"
      @submit="initPage"
    />
  </div>
</template>
<script>
  import utils from '@/assets/utils/zhzf-util';
  import deptApi from "@/api/system/dept";
  import roleApi from "@/api/system/role";
  import detailInfo from './detail-info';
  import HeadBtns from "../../comps/zhzf/head-btns";
  import ListSearch from "../../comps/zhzf/list-search";

  export default {
    name: "deptPage",
    components: {ListSearch, HeadBtns, detailInfo},
    data() {
      return {
        deptFilter: '',
        columns: [
          {title: '机构名称', key: 'name'}
        ],
        data: [],
        allList: [],
        dataTable: [],
        newdata: '',
        shidata: [],
        roledeplist: '',
        options: {
          stripe: true,
          height: utils.getPageheight({noPage:true}),
          highlightCurrentRow: true
        },
        rowHandle: {
          width: 150,
          custom: [
            {title: '新增', size: 'mini', emit: 'add-model', icon: "fa fa-plus", style: "color:#409eff;"},
            {title: '修改', size: 'mini', emit: 'edit-model', icon: "el-icon-edit", style: "color:#67c23a;"},
            {title: '删除', size: 'mini', emit: 'del-model', icon: "el-icon-delete", style: "color:#f56c6c;"}
          ]
        },
        currentId: null,
        detailVisible: false,
        dept: {},
        defaultProps: {
          children: 'children',
          label: 'name'
        },
        selected: [],
        parentID: null
      };
    },
    mounted() {
      this.initPage();
    },
    methods: {
      filterDept() {
        this.$refs.deptTree.filter(this.deptFilter);
      },
      searchParamChange(param) {
        if (param.name) {
          this.dataTable = this.allList.filter(item => item.name.indexOf(param.name) != -1)
        } else {
          this.dataTable = this.allList;
        }
      },
      filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      },
      async initPage(param) {
        await this._fetchChildData();
        this.loadListTree(this.allList);
      },
      loadListTree(dataList) {
        let treeList = utils.generatorDeptTree(dataList);
        this.data = treeList.treeList;

        this.shidata.push(treeList.treeList[0].id);
      },
      async loadListTable(param) {
        this._fetchData(param);
      },
      /**
       * 查询数据
       * @param param
       * @returns {Promise<*>}
       */
      async _fetchData(param) {
        param = Object.assign({type: 1}, param || {});
        let res = await deptApi.deptPage(param);
        let dataList = res.data;

        this.allList = dataList;
        this.dataTable = this.allList;
      },
      /**
       * 查询权限下数据
       * @param param
       * @returns {Promise<*>}
       */
      async _fetchChildData(param) {
        param = Object.assign({type: 1}, param || {});
        let res = await deptApi.childDeptPage(param);
        let dataList = res.data;

        this.allList = dataList;
        this.dataTable = this.allList;
      },
      selectChange(selection) {
        this.selected = selection;
      },
      handleCurrentChange(currentRow) {
        if (currentRow) {
          this.currentId = currentRow.id;
        }
      },

      rowClick(row) {
        let els = this.$refs.d2Crud.$children;
        this.$refs.d2Crud.$children[els.length == 1 ? 0 : els.length - 1].toggleRowSelection(row);
      },
      handleNodeClick(data) {
        this.currentNode = data.id;
        this.loadListTable({pid: data.id});
      },
      showDetail(row) {
        row = row || {};
        this.detailVisible = true;
        this.$refs.detailFrom.initPage({treeList: this.data, info: JSON.parse(JSON.stringify(row))});
      },
      add(rd) {
        let row = {};
        if (rd) {
          rd = rd.row;
          row = {pid: rd.id, pname: rd.name};
        }
        this.showDetail(row);
      },
      mod(rd) {
        //判断有没有选择数据
        if (rd && rd.row) {
          this.showDetail(rd.row);
        } else if (this.selected.length == 1) {
          this.showDetail(this.selected[0]);
        } else {
          utils.showTips('请选择一行数据');
          return;
        }
      },
      async del(row) {
        this.$confirm("确认删除？", "确认信息", {
          distinguishCancelAndClose: true,
          confirmButtonText: "删除",
          cancelButtonText: "取消"
        }).then(async () => {
          await deptApi.delDept([row.row.id]);
          this.initPage();
          this.currentId = null;
          utils.showTips('操作成功');
        });
      },
    }
  };
</script>

<style scoped lang="scss">
  .dept-page {
    height: calc(100% - 18px) !important;

    .grid-content {
      height: 100%;
      background: #fff;

      .d2-crud {
        height: 100% !important;
      }
    }

    .el-row, .el-col {
      height: 100%;
    }

    &:last-child {
      margin-bottom: 0;
    }
  }
</style>
